<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10-react组件组合与非继承</title>
    <script src="react.development.js" type="text/javascript" charset="UTF-8"></script>
    <script src="react-dom.development.js" type="text/javascript" charset="UTF-8"></script>
    <script src="babel.min.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
    <!--
        React有十分强大的组合模式，我们推荐使用组合而非继承来实现代码间的重用
    -->
    <div id="app">

    </div>
</body>
<script type="text/babel">
    //1、组合示例1
    function FancyBorder(props) {
        return (
            <div>
                <label>FancyBorder组件内部</label>
                <div className={"FancyBorder FancyBorder-" + props.color}>
                    {/*props.children表示<FancyBorder></FancyBorder>标签内的所有内容*/}
                    {props.children}
                </div>
            </div>
        );
    }

    function WelcomeDialog() {
        return (
            <FancyBorder color="blue">
                <h1 className="Dialog-title">Welcome</h1>
                <a className="Dialog-message">Thank you for visiting our spacecraft</a>
            </FancyBorder>
        );
    }

    //ReactDOM.render(
    //    <WelcomeDialog />,
    //    document.getElementById("app")
    //);

    //2、可以把<ChineseGreeting>当做<Greeting>的一种特殊实例
    function Greeting(props) {
        return (
            <div>
                <h1>{props.mainTitle}</h1>
                <h3>{props.subTitle}</h3>
            </div>
        );
    }

    function ChineseGreeting() {
        return (
            <Greeting mainTitle="中文问好主标题" subTitle="中文问好副标题" />
        );
    }

    ReactDOM.render(
        <ChineseGreeting />,
        document.getElementById("app")
    );
</script>
</html>